$(function () {
  let layer = layui.layer;
  let form = layui.form;
  let select = null;
  let img;
  // 点击切换
  $("#li1").click(() => {
    $("#two").fadeOut();
    setTimeout(function () {
      $("#one").fadeIn();
    }, 600);
  });
  $("#li2").click(() => {
    $("#one").fadeOut();
    setTimeout(function () {
      $("#two").fadeIn();
    }, 600);
  });

  // 定义查询对象
  let cx = {
    page: 1,
    type: 1,
    limit: 10,
  };
  let cx1 = {
    page: 1,
    type: 2,
    limit: 10,
  };

  // 调用渲染函数
  rendertbody();
  // 请求获取数据
  function rendertbody() {
    axios({
      method: "GET",
      url: "/ydd_link/list",
      params: cx,
      headers: {
        "x-token": localStorage.getItem("x-token"),
      },
    }).then((res) => {
      console.log(res);
      if (res.status !== 200) return false;
      let count = res.data.data.count;
      let curr = res.data.data.currentPage;
      let htmlStr = res.data.data.data.map((item) => {
        return `<tr>
                    <td>${item.id}</td>
                    <td>${item.title}</td>
                    <td>${item.des}</td>
                    <td><span class="text">文字类型</span></td>
                    <td>${item.url}</td>
                    <td class="btn">
                      <button class="layui-btn layui-btn-normal" id="modify" value=${item.id}><i class="layui-icon layui-icon-edit"></i></button>
                      <button class="layui-btn layui-btn-danger" id="remove" value=${item.id}><i class="layui-icon layui-icon-delete"></i></button>
                    </td>
                  </tr>`;
      });
      $(".tbody").html(htmlStr.join(""));

      // 调用分页器函数
      pageone(count, curr);
    });
  }
  // 调用渲染函数
  rendertbody2();
  function rendertbody2() {
    axios({
      method: "GET",
      url: "/ydd_link/list",
      params: cx1,
      headers: {
        "x-token": localStorage.getItem("x-token"),
      },
    }).then((res) => {
      if (res.status !== 200) return false;

      let count = res.data.data.count;
      let curr = res.data.data.currentPage;
      console.log(curr);
      let htmlStr = res.data.data.data.map((item) => {
        return ` <tr>
                    <td>${item.id}</td>
                    <td>${item.des}</td>
                    <td><img src="http://124.223.14.236:8060/${item.img}" alt=""></td>
                    <td><span class="text">图片类型</span></td>
                    <td>${item.url}</td>
                    <td class="btn1">
                      <button class="layui-btn layui-btn-normal" id="modify" value=${item.id}><i class="layui-icon layui-icon-edit"></i></button>
                      <button class="layui-btn layui-btn-danger" id="remove" value=${item.id}><i class="layui-icon layui-icon-delete" ></i></button>
                    </td>
                  </tr> `;
      });
      $(".tbody1").html(htmlStr.join(""));

      // 调用分页器函数
      pagetwo(count, curr);
    });
  }

  // 删除模块
  $("body").on("click", "#remove", function () {
    let id = $(this).prop("value");

    // 弹出层
    layer.confirm("确定删除吗?", { icon: 3, title: "提示" }, function (index) {
      axios({
        method: "get",
        url: "/ydd_link/del?id=" + id,
        headers: { "x-token": localStorage.getItem("x-token") },
      }).then((res) => {
        console.log(res);
        // 重新获取列表数据
        rendertbody();
        rendertbody2();
        if (res.data.errno == 0) return layer.msg("删除成功");
        // 关闭弹出层
        layer.close(index);
        layer.msg("删除失败");
      });
    });
  });

  // 分页模块---文字链接
  function pageone(count, curr) {
    var laypage = layui.laypage;
    // 执行一个laypages实例
    laypage.render({
      elem: "pageone", // 分页器
      count: count, // 数据的数量
      limit: 10, // 每也数据的数量
      curr: curr, // 页数
      // 自定义不同的功能
      layout: [
        "count", // 总条目
        "limit", // 条目选项
        "prev", // 上一页
        "page", // 分页
        "next", // 下一页
        "skip", // 快捷跳转
      ],
      limits: [2, 4, 6, 8, 10],

      // 切换不同页会重新渲染数据
      jump: (obj, first) => {
        // 把最新的值赋值给这个查询参数
        cx.page = obj.curr;
        cx.limit = obj.limit;
        if (!first) {
          rendertbody();
        }
      },
    });
  }
  // 分页模块---图片连链接
  function pagetwo(count, curr) {
    // console.log(count);
    // console.log(curr);
    // layui.laypage.render({
    //   elem: "pagetwo", //注意，这里的 test1 是 ID，不用加 # 号
    //   count: count, // 数据的数量
    //   limit: 10, // 每也数据的数量
    //   curr: curr, // 页数
    //   layout: [
    //     "count", // 总条目
    //     "limit", // 条目选项
    //     "prev", // 上一页
    //     "page", // 分页
    //     "next", // 下一页
    //     "skip", // 快捷跳转
    //   ],
    //   limits: [2, 4, 6, 8, 10],
    //   jump: function (obj, first) {
    //     cx1.page = obj.page;
    //     cx1.limit = obj.limit;
    //     //首次不执行
    //     if (!first) {
    //       rendertbody2();
    //     }
    //   },
    // });
    var laypage = layui.laypage;
    // 执行一个laypages实例
    laypage.render({
      elem: "pagetwo", // 分页器
      count: count, // 数据的数量
      limit: 10, // 每也数据的数量
      curr: curr, // 页数
      // 自定义不同的功能
      layout: [
        "count", // 总条目
        "limit", // 条目选项
        "prev", // 上一页
        "page", // 分页
        "next", // 下一页
        "skip", // 快捷跳转
      ],
      limits: [2, 4, 6, 8, 10],
      // 切换不同页会重新渲染数据
      jump: (obj, first) => {
        // 把最新的值赋值给这个查询参数;
        cx1.page = obj.curr;
        cx1.limit = obj.limit;

        if (!first) {
          rendertbody2();
        }
      },
    });
  }

  // 通过委托的形式添加点击事件
  $("body").on("click", "#submit", function () {
    $("#files").click();
  });
  // 给 files 绑定 change 事件
  $("body").on("change", "#files", function (e) {
    $("#form2").submit();
  });

  // 委托的形式为 form2 添加 submit提交事件
  $("body").on("submit", "#form2", (e) => {
    // 阻止默认行为
    e.preventDefault();
    let fd = new FormData($("#form2")[0]);
    // 发起 post 请求
    $.ajax({
      url: "http://124.223.14.236:8060/common/upload?type=images",
      method: "POST",
      data: fd,
      // 请求头
      headers: {
        token: localStorage.getItem("x-token"),
      },
      // 注意：formData格式的请求要加上下面两项配置
      contentType: false,
      processData: false,
      success: function (res) {
        console.log(res);
        img = res.data.savePath;
      },
    });
  });

  // 下拉
  $(document).ready(function () {
    // select下拉框选中触发事件
    form.on("select(test1)", function (data) {
      let val = data.value;
      select = data.value;
      if (val == 0) {
        // 如果 val 的值为 0 就让 title1(标题)显示 因为文字链接有标题 图片链接没有
        $("#title1").show();
        $("#title2").hide();
      } else {
        // 否则就让 title2 显示
        $("#title2").show();
        $("#title1").hide();
      }
    });
  });

  // 添加模块;
  renderAdd();
  function renderAdd() {
    $(".add").click(() => {
      // 弹出层
      layer.open({
        title: "添加友情链接",
        area: ["700px", "400px"],
        content: $("#addHref").html(),
        btn: ["确定", "取消"],
        // 对象里面的方法 使用
        // yes:是 layui 里面确定的回调
        yes: function (index) {
          let type = "";
          let des = $(".layui-textarea").val().trim();
          let title = "";
          let url = $("#url").val().trim();
          // 判断 select 的值是否为 0 是的话就是文字链接
          if (select == "0") {
            type = 1;
            title = $("#title5").val().trim();
          } else if (select === "1") {
            // 否则就是图片链接
            type = 2;
          } else {
            return layer.msg("请选择链接类型");
          }
          // 发起请求
          axios({
            method: "post",
            url: "/ydd_link/add",
            headers: {
              "x-token": localStorage.getItem("x-token"),
            },
            data: {
              des: des,
              img: img,
              title: title,
              type: type + "",
              url: url,
            },
          }).then((res) => {
            console.log(res);
            // 判断 errno 是否为 0
            if (res.data.errno !== 0) return layer.msg("添加失败");
            layer.msg("添加成功");
            // 如果 type 为 1 就调用文字链接渲染函数、重新渲染页面
            if (type == 1) {
              // 重新调用函数
              rendertbody();
              // 否者就调用图片链接渲染函数、重新渲染页面
            } else {
              rendertbody2();
            }
          });
          // 关闭弹出层
          layer.close(index);
        },
      });
      // 动态渲染
      form.render();
    });
  }

  // 下拉
  $(document).ready(function () {
    // select下拉框选中触发事件
    form.on("select(test2)", function (data) {
      let val = data.value;
      select = data.value;
      if (val == 0) {
        // 如果 val 的值为 0 就让 title3(标题)显示
        $("#title3").show();
        $("#title4").hide();
      } else {
        // 否则就让 title4 显示
        $("#title4").show();
        $("#title3").hide();
      }
    });
  });
  // 修改模块
  renderAdd2();
  function renderAdd2() {
    // 通过委托的形式 添加点击事件
    $("body").on("click", "#modify", function () {
      let id = $(this).prop("value");
      // 弹出层
      layer.open({
        title: "修改友情链接",
        area: ["700px", "400px"],
        content: $("#renderHtml").html(),
        btn: ["确定", "取消"],
        yes: function (index) {
          let type = "";
          let des = $(".layui-textarea").val().trim();
          let title = "";
          let url = $("#url").val().trim();
          console.log(img);
          // 判断 select 的值 确认是文字还是图片
          if (select == "0") {
            // 0 是文字类型
            type = 1;
            title = $("#title1").val().trim();
          } else if (select === "1") {
            // 1 是图片类型
            type = 2;
          } else {
            return layer.msg("请选择链接类型");
          }
          // 发起请求
          axios({
            method: "post",
            url: "/ydd_link/update",
            headers: {
              "x-token": localStorage.getItem("x-token"),
            },
            data: {
              default_data: null,
              des: des,
              img: img,
              title: title,
              type: type + "",
              url: url,
              id: id,
              img: img,
            },
          }).then((res) => {
            console.log(res);
            if (res.data.errno !== 0) return layer.msg("修改失败");
            layer.msg("修改成功");
            // 打印当前类型是 文字 还是 图片
            console.log(type);
            if (type == 1) {
              // 修改成功后重新渲染数据
              rendertbody();
            } else {
              rendertbody2();
            }
          });
          // 关闭弹出层
          layer.close(index);
        },
      });
      // 动态渲染
      form.render();
    });
  }
});
